<template>
  <div class="tool-bar">
    <!-- tab按钮 需要一个数据源去驱动按钮 -->
    <div
      :key="item.name"
      @click="onChangeFragment(item, index)"
      class="tool-bar-item"
      v-for="(item,index) in toolBarData"
    >
      <img
        :src="[index === selectItemIndex ? item.hIcon : item.nIcon ]"
        alt="tp"
        class="tool-bar-item-img"
      />
      <p
        :class="{'tool-bar-item-name-h':index === selectItemIndex}"
        class="tool-bar-item-name"
      >{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolBar',
  data () {
    return {
      toolBarData: [{
        nIcon: require('@img/home-n.svg'),
        hIcon: require('@img/home-h.svg'),
        name: '首页',
        componentName: 'home'
      }, {
        nIcon: require('@img/shopping-n.svg'),
        hIcon: require('@img/shopping-h.svg'),
        name: '购物车',
        componentName: 'shopping'
      },
      {
        nIcon: require('@img/my-n.svg'),
        hIcon: require('@img/my-h.svg'),
        name: '我的',
        componentName: 'my'
      }],
      selectItemIndex: 0
    }
  },
  methods: {
    onChangeFragment (item, index) {
      this.selectItemIndex = index
      this.$emit('onChangeFragment', item.componentName)
    },
    /**
     * 指定切换的 tab 页
     */
    pushFragment (index) {
      // 调用 onChangeFragment 切换对应的 tab
      this.onChangeFragment(this.toolBarData[index], index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.tool-bar {
  width: 100%;
  height: px2rem(46);
  display: flex;
  justify-content: space-around;
  background-color: white;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2);
  &-item {
    text-align: center;
    padding: px2rem(4) px2rem(12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-img {
      width: px2rem(22);
      height: px2rem(22);
    }
    &-name {
      font-size: $infoSize;
      margin-top: px2rem(4);
      &-h {
        color: $mainColor;
      }
    }
  }
}
</style>
